@use "theme/globals" as *;
@use "sass:math" as math;

$quiz-timer-warn-color: $red !default;
$quiz-timer-iterations: 15 !default;

:host {
    core-timer {
        // Make the timer go red when it's reaching 0.
        @for $i from 0 through $quiz-timer-iterations {
            &.core-timer-timeleft-#{$i} {
                $timer-background: rgba($quiz-timer-warn-color, 1 - math.div($i, $quiz-timer-iterations));
                --timer-background: #{$timer-background};
                @if $i <= math.div($quiz-timer-iterations, 2) {
                    --timer-text-color: var(--white);
                }
            }
        }
    }

    ion-item.core-question-blocked,
    ion-item.core-question-complete,
    ion-item.core-question-answersaved,
    ion-item.core-question-requiresgrading {
        --background: var(--gray-300);
    }
}
